<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="theme-color" content="#000000">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/favicon.png" />
	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/static/favicon.png" />
	<link rel="icon" type="image/png" href="/static/favicon.png" sizes="32x32" />
	<link rel="icon" type="image/png" href="/static/favicon.png" sizes="16x16" />
	<title>Star Charts</title>
	<meta name="description" content="StarCharts">
	<meta name="author" content="https://github/caarlos0">
	<link rel="stylesheet" href="/static/styles.css?v={{ .Version }}">
	<link rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/base16/dracula.min.css"
		integrity="sha512-oDvVpANXrKQ6R5B25VO6DooEQWA7jUXleyD6oUWHChC0fjv8wAANSX7lKXtp5D6HbZ7EUxd0wjMibtpCQ+aCDw=="
		crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
	<div class="title">
		<img src="/static/stars.svg" alt="Stars">
		<span class="title"><a href="/">starcharts</a></span>
		<span class="subtitle">Plot your repository stars over time.</span>
	</div>
	{{ with .Details }}
	<div class="main">
		<p>
			{{ if gt .StargazersCount 0 }}
			<b>Awesome!</b>
			{{ else }}
			<b>Hang in there!</b>
			{{ end }}
			<a href="https://github.com/{{ .FullName }}">{{ .FullName }}</a>
			was created <time datetime="{{ .CreatedAt }}"></time>
			and now has <b>{{ .StargazersCount }}</b> stars.
		</p>
	</div>
	{{ if gt .StargazersCount 0 }}
	<div class="chart">
		<p>
			<img src="/{{ .FullName }}.svg"
				alt="Please try again in a few minutes. This might not work for very famous repository.">
		</p>
	</div>
	<div class="code">
		<p>
			You can include the chart on your repository's
			<code>README.md</code>
			as follows:
		<pre>
<code class="markdown" id="code">
## Stargazers over time

[![Stargazers over time](https://starchart.cc/{{ .FullName }}.svg)](https://starchart.cc/{{ .FullName }})

</code>
<button class="btn copy-btn" data-clipboard-target="#code">Copy</button>
</pre>
		</p>
	</div>
	<div class="footer">
		<a
			href="https://www.digitalocean.com/?refcode=7e8e9efb2f77&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
			<img src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg"
				alt="DigitalOcean Referral Badge" width="150px" />
		</a>
	</div>
	{{ end }}
	{{ else }}
	<div class="main">
		{{ with .Error }}
		<p class="error">{{ . }}</p>
		{{ end }}
		<form method="POST">
			<label for="repo">Repository:</label><br>
			<input type="text" id="repository" name="repository" value="caarlos0/starcharts"
				placeholder="caarlos0/starcharts" autofocus="true"><br>
			<input type="submit" value="Submit" class="btn">
		</form>
	</div>
	{{ end }}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"
		integrity="sha512-SVDh1zH5N9ChofSlNAK43lcNS7lWze6DTVx1JCXH1Tmno+0/1jMpdbR8YDgDUfcUrPp1xyE53G42GFrcM0CMVg=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"
		integrity="sha512-z+/WWfyD5tccCukM4VvONpEtLmbAm5LDu7eKiyMQJ9m7OfPEDL7gENyDRL3Yfe8XAuGsS2fS4xSMnl6d30kqGQ=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"
		integrity="sha512-sIqUEnRn31BgngPmHt2JenzleDDsXwYO+iyvQ46Mw6RL+udAUZj2n/u/PGY80NxRxynO7R9xIGx5LEzw4INWJQ=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script defer data-domain="starchart.cc" src="https://plausible.io/js/plausible.js"></script>
	<script>
		new ClipboardJS('.copy-btn');
		hljs.highlightAll();
		document.querySelectorAll('time').forEach(t => timeago.render(t));
		document.querySelectorAll('input#repository').forEach(i => i.select());
	</script>
</body>

</html>
